<template>
  <el-form
    label-position="top"
    label-width="80px"
    :model="formdata"
    style="padding: 0px 20px 0px 20px"
  >
    <el-form-item label="名称">
      <el-input v-model="formdata.name" />
    </el-form-item>
    <el-form-item label="格式">
      <el-radio-group v-model="formdata.type">
        <el-radio label="jpg" name="jpg" />
        <el-radio label="png" name="jpg" />
        <el-radio label="jpeg" name="jpeg" />
        <el-radio label="wbmp" name="wbmp" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="图片质量">
      <el-slider v-model="formdata.qulity" />
    </el-form-item>
    <el-form-item label="尺寸(px)">
      <el-col class="line" :span="2" style="color: #606266">宽</el-col>
      <el-col :span="10">
        <el-input-number
          v-model="formdata.width"
          controls-position="right"
          style="width: 100px"
        />
      </el-col>
      <el-col class="line" :span="2" style="color: #606266">高</el-col>
      <el-col :span="10">
        <el-input-number
          v-model="formdata.height"
          controls-position="right"
          style="width: 100px"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="常用尺寸">
      <el-select
        v-model="formdata.size"
        placeholder="请选择"
        style="width: 100%"
        @change="selPosterSize"
      >
        <el-option
          v-for="item in commonSize"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-tabs v-model="formdata.activeName" @tab-click="handleClick">
      <el-tab-pane label="颜色" name="color">
        <el-color-picker v-model="formdata.color" />
      </el-tab-pane>
      <el-tab-pane label="图片" name="img">
        <el-input v-model="formdata.img_src" type="textarea" :rows="4" />
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
export default {
  props: ['formdata'],
  data () {
    return {
      commonSize: [
        {
          id: 1,
          label: '海报 750 x 1333',
          width: 750,
          height: 1333
        },
        {
          id: 2,
          label: '课程封面 900 x 500',
          width: 900,
          height: 500
        },
        {
          id: 3,
          label: '公众号首图 900 x 383',
          width: 900,
          height: 383
        },
        {
          id: 4,
          label: '海报 640 x 1008',
          width: 640,
          height: 1008
        },
        {
          id: 5,
          label: '海报 720 x 1280',
          width: 720,
          height: 1280
        },
        {
          id: 6,
          label: '海报 1078 x 2280',
          width: 1078,
          height: 2280
        },
        {
          id: 7,
          label: '海报 1242 x 2208',
          width: 1242,
          height: 2208
        },
        {
          id: 8,
          label: '朋友圈背景图 800 x 800',
          width: 800,
          height: 800
        },
        {
          id: 9,
          label: '长图海报 800 x 2000',
          width: 800,
          height: 2000
        },
        {
          id: 10,
          label: '方形海报 1200 x 1200',
          width: 1200,
          height: 1200
        },
        {
          id: 11,
          label: '方形 1080 x 1080',
          width: 1080,
          height: 1080
        }
      ]
    }
  },
  watch: {
    'formdata.width' () {
      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    },
    'formdata.height' () {
      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    },
    'formdata.color' () {
      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    },
    'formdata.img_src' () {
      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    }
  },
  methods: {
    // 切换颜色还是背景
    handleClick () {
      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    },
    // 选择海报
    selPosterSize (size) {
      this.commonSize.forEach(element => {
        if (element.id === size) {
          this.formdata.width = element.width
          this.formdata.height = element.height
          return false
        }
      })

      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    }
  }
}
</script>
